<template>
    <div>
        <a-table :columns="columns" :pagination="pagination"
                 :data-source="searchedRoomRepoList" :row-key="record=>record.date">
            <span slot="tags" slot-scope="availableNum">
              <a-tag class="ant-tagg" :color="availableNum === 0 ? 'red' : availableNum < 3 ? 'orange' : 'blue'"
              >
                  <p v-text="availableNum === 0 ? '已售空' : availableNum < 3 ? '库存紧张' : '库存正常'" class="in-tag"></p>
              </a-tag>
            </span>
<!--            <span slot="action" slot-scope="text, record">-->
            <span slot="action" slot-scope="record">
              <a @click="modifyRoomCnt(record.date)">修改可用房间</a>
            </span>
        </a-table>
        <room-cnt-modify-modal :date="activeDate"/>
    </div>
</template>
<script>
    import {mapGetters, mapMutations} from "vuex";
    import roomCntModifyModal from "./roomCntModifyModal";

    const columns = [
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date'
        },
        {
            title: '可用房间数量',
            dataIndex: 'availableNum',
            key: 'availableNum',
        },
        {
            title: '已占用房间数量',
            dataIndex: 'reservedNum',
            key: 'reservedNum',
        },
        {
            title: '标签',
            key: 'tags',
            dataIndex: 'availableNum',
            scopedSlots: {customRender: 'tags'},
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },
    ];


    export default {
        data() {
            return {
                form: this.$form.createForm(this, {name: 'horizontal_search'}),
                columns,
                pagination: {
                    onChange: page => {
                        console.log(page);
                    },
                    pageSize: 5,
                },
                activeDate: undefined
            };
        },
        components: {
            roomCntModifyModal
        },
        computed: {
            ...mapGetters(['searchedRoomRepoList']),
        },
        methods: {
            ...mapMutations(['set_roomCntModifyModalVisible', 'set_searchedRoomRepoList']),
            modifyRoomCnt(activeDate) {
                console.log(activeDate)
                this.activeDate = activeDate;
                this.set_roomCntModifyModalVisible(true)
            }
        }
    };
</script>
<style>
    .ant-tag {
        margin: 0px;
    }
    .in-tag {
        margin-bottom: 0;
    }
</style>